@import org.json4s.scalap.scalasig.ClassFileParser.field
@(issue: Option[gitbucket.core.model.Issue],
  comments: List[gitbucket.core.model.Comment],
  issueLabels: List[gitbucket.core.model.Label],
  issueAssignees: List[gitbucket.core.model.IssueAssignee],
  collaborators: List[String],
  milestones: List[(gitbucket.core.model.Milestone, Int, Int)],
  priorities: List[gitbucket.core.model.Priority],
  defaultPriority: Option[gitbucket.core.model.Priority],
  labels: List[gitbucket.core.model.Label],
  customFields: List[(gitbucket.core.model.CustomField, Option[gitbucket.core.model.IssueCustomField])],
  isManageable: Boolean,
  repository: gitbucket.core.service.RepositoryService.RepositoryInfo)(implicit context: gitbucket.core.controller.Context)
@import gitbucket.core.view.helpers
<div style="margin-bottom: 14px;">
  <span class="muted small strong">Labels</span>
  @if(isManageable){
    <div class="pull-right">
      @gitbucket.core.helper.html.dropdown("Edit", right = true, filter = ("labels", "Filter Labels")) {
        @labels.map { label =>
          <li>
            <a href="#" class="toggle-label" data-label-id="@label.labelId">
              @gitbucket.core.helper.html.checkicon(issueLabels.exists(_.labelId == label.labelId))
              <span class="label" style="background-color: #@label.color;">&nbsp;</span>
              @label.labelName
            </a>
          </li>
        }
      }
      @if(issue.isEmpty){
        <input type="hidden" name="labelNames" value=""/>
      }
    </div>
  }
</div>
<ul class="label-list nav nav-pills nav-stacked">
  @gitbucket.core.issues.html.labellist(issueLabels)
</ul>
<hr/>

<div style="margin-bottom: 14px;">
  <span class="muted small strong">Priority</span>
  @if(isManageable){
    <div class="pull-right">
      @gitbucket.core.helper.html.dropdown("Edit", right = true, filter = ("priority", "Filter Priority")) {
        <li><a href="javascript:void(0);" class="priority" data-id=""><i class="octicon octicon-x"></i> Clear priority</a></li>
        @priorities.map { priority =>
          <li>
            <a href="javascript:void(0);" class="priority" data-id="@priority.priorityId" data-name="@priority.priorityName" data-color="#@priority.color" data-font-color="#@priority.fontColor"@if(!priority.description.isEmpty) { title="@priority.description.get" }>
              @gitbucket.core.helper.html.checkicon(issue.flatMap(_.priorityId).orElse(defaultPriority.map(_.priorityId)).map(id => id == priority.priorityId).getOrElse(false))
              <span class="label" style="background-color: #@priority.color;">&nbsp;</span>
              @priority.priorityName
            </a>
          </li>
        }
      }
    </div>
  }
</div>
<span id="label-priority">
  @issue.flatMap(_.priorityId).orElse(defaultPriority.map(_.priorityId)).map { priorityId =>
    @priorities.collect { case priority if(priority.priorityId == priorityId) => {
      <a class="issue-priority" style="background-color: #@priority.color; color: #@priority.fontColor;" href="@helpers.url(repository)/issues?priority=@helpers.urlEncode(priority.priorityName)&state=open"@if(!priority.description.isEmpty) { title="@priority.description.get" }>@priority.priorityName</a>
    }}
  }.getOrElse {
    <span class="muted small">No priority</span>
  }
</span>
@if(issue.isEmpty){
  <input type="hidden" name="priorityId" value="@defaultPriority.map(_.priorityId).map(_.toString).getOrElse("")"/>
}
<hr/>

<div style="margin-bottom: 14px;">
  <span class="muted small strong">Milestone</span>
  @if(isManageable){
    <div class="pull-right">
      @gitbucket.core.helper.html.dropdown("Edit", right = true, filter = ("milestone", "Filter Milestone")) {
        <li><a href="javascript:void(0);" class="milestone" data-id=""><i class="octicon octicon-x"></i> Clear this milestone</a></li>
        @milestones.filter(_._1.closedDate.isEmpty).map { case (milestone, _, _) =>
          <li>
            <a href="javascript:void(0);" class="milestone" data-id="@milestone.milestoneId" data-title="@milestone.title">
              @issue.map { issue =>
                @gitbucket.core.helper.html.checkicon(Some(milestone.milestoneId) == issue.milestoneId)
              }
              @milestone.title
              <div class="small" style="padding-left: 20px;">
                @milestone.dueDate.map { dueDate =>
                  @if(helpers.isPast(dueDate)){
                    <i class="octicon octicon-alert" style="color:#BD2C00;"></i>
                    <span class="milestone-alert">Due by @helpers.date(dueDate)</span>
                  } else {
                    <span class="muted">Due by @helpers.date(dueDate)</span>
                  }
                }.getOrElse {
                  <span class="muted">No due date</span>
                }
              </div>
            </a>
          </li>
        }
      }
    </div>
  }
</div>
<div id="milestone-progress-area">
  @issue.flatMap(_.milestoneId).map { milestoneId =>
    @milestones.collect { case (milestone, openCount, closeCount) if(milestone.milestoneId == milestoneId) =>
      @gitbucket.core.issues.milestones.html.progress(openCount + closeCount, closeCount)
    }
  }
</div>
<span id="label-milestone">
  @issue.flatMap(_.milestoneId).map { milestoneId =>
    @milestones.collect { case (milestone, _, _) if(milestone.milestoneId == milestoneId) =>
      <a class="strong small username" href="@helpers.url(repository)/issues?milestone=@helpers.urlEncode(milestone.title)&state=open">@milestone.title</a>
    }
  }.getOrElse {
    <span class="muted small">No milestone</span>
  }
</span>
@if(issue.isEmpty){
  <input type="hidden" name="milestoneId" value=""/>
}
<hr/>
<div style="margin-bottom: 14px;">
  <span class="muted small strong">Assignee</span>
  @if(isManageable){
    <div class="pull-right">
      @gitbucket.core.helper.html.dropdown("Edit", right = true, filter = ("assignee", "Filter Assignee")) {
        @collaborators.map { collaborator =>
          <li>
            <a href="javascript:void(0);" class="toggle-assign" data-name="@collaborator">
              @gitbucket.core.helper.html.checkicon(issueAssignees.exists(_.assigneeUserName == collaborator))@helpers.avatar(collaborator, 20) @collaborator
            </a>
          </li>
        }
      }
    </div>
  }
</div>
<span id="label-assigned">
  @issueAssignees.map { assignee =>
    <div>@helpers.avatarLink(assignee.assigneeUserName, 20) @helpers.user(assignee.assigneeUserName, styleClass="username strong small")</div>
  }
  @if(issueAssignees.isEmpty) {
    <span class="muted small">No one assigned</span>
  }
</span>
@if(issue.isEmpty){
  <input type="hidden" name="assigneeUserNames" value=""/>
}

@customFields.map { case (field, value) =>
  <hr/>
  <div style="margin-bottom: 14px;">
    <span class="muted small strong">@field.fieldName</span>
    <div class="pull-right">
      @gitbucket.core.model.CustomFieldBehavior(field.fieldType).map { behavior =>
        @if(issue.nonEmpty) {
          @Html(behavior.fieldHtml(repository, issue.get.issueId, field.fieldId, field.fieldName, field.constraints, value.map(_.value).getOrElse(""), isManageable))
        }
        @if(issue.isEmpty) {
          @Html(behavior.createHtml(repository, field.fieldId, field.fieldName, field.constraints))
        }
      }
    </div>
  </div>
  <span id="custom-field-@field.fieldId-error" class="error custom-field-error"></span>
}

@issue.map { issue =>
  @gitbucket.core.plugin.PluginRegistry().getIssueSidebars.map { sidebarComponent =>
    @sidebarComponent(issue, repository, context)
  }
  <hr/>
  <div style="margin-bottom: 14px;">
    @defining((issue.openedUserName :: comments.map(_.commentedUserName)).distinct){ participants =>
      <div class="muted small strong">@participants.size @helpers.plural(participants.size, "participant")</div>
    }
  </div>
  @defining((issue.openedUserName :: comments.map(_.commentedUserName)).distinct){ participants =>
    @participants.map { participant =>
      @helpers.avatarLink(participant, 20, tooltip = true)
    }
  }
}
<script>
$(function(){
@issue.map { issue =>
  $('a.toggle-label').click(function(){
    const path = switchToggleOptions($(this));
    $.post('@helpers.url(repository)/issues/@issue.issueId/label/' + path,
      { labelId : $(this).data('label-id') },
      function(data){
        $('ul.label-list').empty().html(data);
      }
    );
    return false;
  });

  $('a.milestone').click(function(){
    const title = $(this).data('title');
    const milestoneId = $(this).data('id');
    $.post('@helpers.url(repository)/issues/@issue.issueId/milestone',
      { milestoneId: milestoneId },
      function(data){
        displayMilestone(title, milestoneId, data);
      }
    );
  });

  $('a.priority').click(function(){
    const priorityName = $(this).data('name');
    const priorityId = $(this).data('id');
    const description = $(this).attr('title');
    const color = $(this).data('color');
    const fontColor = $(this).data('font-color');
    $.post('@helpers.url(repository)/issues/@issue.issueId/priority',
      { priorityId: priorityId },
      function(data){
        displayPriority(priorityName, priorityId, description, color, fontColor);
      }
    );
  });

  $('a.toggle-assign').click(function(){
    const path = switchToggleOptions($(this));
    $.post('@helpers.url(repository)/issues/@issue.issueId/assignee/' + path,
      { assigneeUserName : $(this).data('name') },
      function(data){
        const assignees = Array();
        $('a.toggle-assign').each(function(i, e){
          if($(e).children('i').hasClass('octicon-check') == true){
            assignees.push($(e).text().trim());
          }
        });
        displayAssignee(assignees);
      }
    );
    return false;
  });
}.getOrElse {
  $('a.toggle-label').click(function(){
    switchToggleOptions($(this));
    const labelNames = Array();
    $('a.toggle-label').each(function(i, e){
      if($(e).children('i').hasClass('octicon-check') == true){
        labelNames.push($(e).text().trim());
      }
    });
    $('input[name=labelNames]').val(labelNames.join(','));

    $.post('@helpers.url(repository)/issues/new/label',
      { labelNames : labelNames.join(',') },
      function(data){
        $('ul.label-list').empty().html(data);
      }
    );
  });

  $('a.milestone').click(function(){
    const title = $(this).data('title');
    const milestoneId = $(this).data('id');
    displayMilestone(title, milestoneId);
    $('input[name=milestoneId]').val(milestoneId);
  });

  $('a.priority').click(function(){
    const priorityName = $(this).data('name');
    const priorityId = $(this).data('id');
    const description = $(this).attr('title');
    const color = $(this).data('color');
    const fontColor = $(this).data('font-color');
    displayPriority(priorityName, priorityId, description, color, fontColor);
    $('input[name=priorityId]').val(priorityId);
  });

  $('a.toggle-assign').click(function(){
    switchToggleOptions($(this));
    const assignees = Array();
    $('a.toggle-assign').each(function(i, e){
      if($(e).children('i').hasClass('octicon-check') == true){
        assignees.push($(e).text().trim());
      }
    });
    $('input[name=assigneeUserNames]').val(assignees.join(','));
    displayAssignee(assignees);
  });
}

  function switchToggleOptions($this){
    const i = $this.children('i');
    if(i.hasClass('octicon-check')){
      i.removeClass('octicon-check');
      return 'delete';
    } else {
      i.addClass('octicon-check');
      return 'new';
    }
  }

  function displayMilestone(title, milestoneId, progress){
    $('a.milestone i.octicon-check').removeClass('octicon-check');
    if(milestoneId == ''){
      $('#label-milestone').html($('<span class="muted small">').text('No milestone'));
      $('#milestone-progress-area').empty();
    } else {
      $('#label-milestone').html($('<a class="strong small username">').text(title)
        .attr('href', '@helpers.url(repository)/issues?milestone=' + encodeURIComponent(title) + '&state=open'));
      if(progress){
        $('#milestone-progress-area').html(progress);
      }
      $('a.milestone[data-id=' + milestoneId + '] i').addClass('octicon-check');
    }
  }

  function displayPriority(priorityName, priorityId, description, color, fontColor){
    $('a.priority i.octicon-check').removeClass('octicon-check');
    if(priorityId == ''){
      $('#label-priority').html($('<span class="muted small">').text('No priority'));
    } else {
      $('#label-priority').html($('<a class="issue-priority">').text(priorityName)
        .attr('href', '@helpers.url(repository)/issues?priority=' + encodeURIComponent(priorityName) + '&state=open')
        .attr('title', description)
        .css({
          "background-color": color,
          "color": fontColor
        }));

      $('a.priority[data-id=' + priorityId + '] i').addClass('octicon-check');
    }
  }

  function displayAssignee(assignees){
    $('a.assign i.octicon-check').removeClass('octicon-check');
    if(assignees.length == 0){
      $('#label-assigned').html($('<span class="muted small">').text('No one assigned'));
    } else {
      $('#label-assigned').empty();
      for (const userName of assignees) {
        $('#label-assigned').append($('<div>').append(
            $('a.toggle-assign').parent().find("img.avatar-mini[alt='@@" + userName + "']").clone(false),
            ' ',
            $('<a class="username strong small">').attr('href', '@context.path/' + userName).text(userName)));
      }
    }
  }
});
</script>
